<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      @close="handleClose"
      @open="handleOpen"
      destroy-on-close
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>项目编辑</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <el-tabs v-model="activeTabName" @tab-change="tabChange">
        <el-tab-pane label="合同信息" name="0"></el-tab-pane>
        <el-tab-pane label="合同成员" name="1"></el-tab-pane>
        <el-tab-pane label="合同预算" name="2"></el-tab-pane>
      </el-tabs>
      <ContractBaseInfo v-if="activeTabName != 0" />
      <ContractInfoEdit
        v-if="activeTabName == 0"
        ref="contractInfoEditRef"
        @save-success="saveSuccess"
        @save-ok="loading = false"
      />
      <ContractMemberEdit
        v-if="activeTabName == 1"
        ref="contractMemberEditRef"
        @save-success="saveSuccess"
        @save-ok="loading = false"
      />
      <ContractBudgetEdit
        v-if="activeTabName == 2"
        ref="contractBudgetEditRef"
        @save-success="saveSuccess"
        @save-ok="loading = false"
      />
      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <!-- <template v-if="verifyRoleType.isKyry()">
              <el-button type="primary" @click="handleSubmit(-1)" :loading="loading"
                >暂存</el-button
              >
              <el-button type="primary" @click="handleSubmit(1)" :loading="loading">提交</el-button>
            </template>
            <template v-if="verifyRoleType.isKyms()">
              <el-button type="primary" @click="handleSubmit(-1)" :loading="loading"
                >保存</el-button
              >
              <el-button type="primary" @click="handleSubmit(2)" :loading="loading" v-if="isAuditor"
                >保存并通过</el-button
              >
            </template>
            <template v-if="verifyRoleType.iskycgly()">
              <el-button type="primary" @click="handleSubmit(-1)" :loading="loading"
                >保存</el-button
              >
              <el-button type="primary" @click="handleSubmit(2)" :loading="loading"
                >保存并通过</el-button
              >
            </template> -->
            <el-button
              type="primary"
              @click="handleSubmit(-1)"
              :loading="loading && submitType == -1"
              :disabled="loading && submitType != -1"
              >{{ verifyRoleType.isKyry() ? "暂存" : "保存" }}</el-button
            >
            <el-button
              type="primary"
              @click="handleSubmit(1)"
              :loading="loading && submitType == 1"
              :disabled="loading && submitType != 1"
              v-if="verifyRoleType.isKyry()"
              >提交</el-button
            >
            <el-button
              type="primary"
              @click="handleSubmit(2)"
              :loading="loading && submitType == 2"
              :disabled="loading && submitType != 2"
              v-if="isAuditor || (verifyRoleType.iskycgly() && checkStatus != 1)"
              >保存并通过</el-button
            >
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import ContractBaseInfo from "./ContractBaseInfo.vue";
import ContractInfoEdit from "./ContractInfoEdit.vue";
import ContractMemberEdit from "./ContractMemberEdit.vue";
import ContractBudgetEdit from "./ContractBudgetEdit.vue";
import { ElMessage } from "element-plus";
import useCommonFetch from "@/hooks/useCommonFetch";
import { verifyRoleType } from "@/utils/main";
/**获取公共下拉数据开始*/
const memberTypeList = useCommonFetch("成员类型");
const unitList = useCommonFetch("成果归属单位");
const allUnitList = useCommonFetch("所有单位");
const contractTypeList = useCommonFetch("项目分类（横向）");
const contractEffectiveTypeList = useCommonFetch("进账合同有效状态");
const contractPerformTypeList = useCommonFetch("项目状态"); //进行状态
const payTypeList = useCommonFetch("支付方式");
const jfTypeList = useCommonFetch("甲方类别");
const provinceList = useCommonFetch("甲方地区");
const tjgsList = useCommonFetch("教育部统计归属");
const jjfwmbList = useCommonFetch("社会经济服务目标");
const hzTypeList = useCommonFetch("合作形式");
const gmjjhyList = useCommonFetch("国民经济行业");
const applierTitleList = useCommonFetch("职称");
const degreeList = useCommonFetch("学位");
const cdTypeList = useCommonFetch("项目-承担角色");
provide("memberTypeList", memberTypeList);
provide("unitList", unitList);
provide("allUnitList", allUnitList);
provide("contractTypeList", contractTypeList);
provide("contractEffectiveTypeList", contractEffectiveTypeList);
provide("contractPerformTypeList", contractPerformTypeList);
provide("payTypeList", payTypeList);
provide("jfTypeList", jfTypeList);
provide("provinceList", provinceList);
provide("tjgsList", tjgsList);
provide("jjfwmbList", jjfwmbList);
provide("hzTypeList", hzTypeList);
provide("gmjjhyList", gmjjhyList);
provide("applierTitleList", applierTitleList);
provide("degreeList", degreeList);
provide("cdTypeList", cdTypeList);
/**获取公共下拉数据结束*/
const dialogVisible = ref(false);
const activeTabName = ref("0");
const contractInfoEditRef = ref();
const contractMemberEditRef = ref();
const contractBudgetEditRef = ref();
const operateId = ref(null);
const isAuditor = ref(false);
const taskId = ref("");
const checkStatus = ref("");
const loading = ref(false);
const submitType = ref(null);
provide("id", operateId);
provide("isAuditor", isAuditor);
provide("taskId", taskId);
provide("checkStatus", checkStatus);
//编辑 tabIndex:tab页索引默认为0
const edit = (id, isAudit, tId, checkState) => {
  operateId.value = id;
  isAuditor.value = isAudit;
  taskId.value = tId;
  checkStatus.value = checkState;
  dialogVisible.value = true;
};
//打开弹窗 显示对应的组件
const handleOpen = async () => {
  if (activeTabName.value == "0") {
    contractInfoEditRef.value.edit(operateId.value);
  } else if (activeTabName.value == "1") {
    contractMemberEditRef.value.edit(operateId.value);
  } else {
    contractBudgetEditRef.value.edit(operateId.value);
  }
};
//关闭弹窗
const handleClose = () => {
  activeTabName.value = "0";
  loading.value = false;
};
//点击保存
const handleSubmit = (type) => {
  loading.value = true;
  submitType.value = type;
  if (activeTabName.value == "0") {
    contractInfoEditRef.value.save(type);
  } else if (activeTabName.value == "1") {
    contractMemberEditRef.value.save(type);
  } else {
    contractBudgetEditRef.value.save(type);
  }
};
defineExpose({ edit });
//tab改变
const tabChange = (val) => {
  nextTick(() => {
    if (val == "0") {
      contractInfoEditRef.value.edit(operateId.value);
    } else if (val == "1") {
      contractMemberEditRef.value.edit(operateId.value);
    } else {
      contractBudgetEditRef.value.edit(operateId.value);
    }
  });
};
const emit = defineEmits(["edit-success"]);
//信息保存成功事件
const saveSuccess = () => {
  loading.value = false;
  ElMessage({
    message: "操作成功！",
    type: "success",
  });
  dialogVisible.value = false;
  emit("edit-success");
};
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
:deep(.el-tabs__header) {
  padding: 0 10px;
  margin-bottom: 0;
  background: #fff;
}
</style>
